<ion-header>

</ion-header>

<ion-content #rcmdContainer padding>
    <!-- <ion-content #rcmdContainer (ionScrollEnd)="showScrollTopBtn()" padding> -->


  <ion-slides pager style="height: 200px" loop autoplay="1500">

    <ion-slide>
      <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/1_328.jpg" style="width: 100%" alt="">
    </ion-slide>

    <ion-slide>
      <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/2_328.jpg" style="width: 100%" alt="">
    </ion-slide>

    <ion-slide>
      <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/3_328.jpg" style="width: 100%" alt="">
    </ion-slide>

  </ion-slides>
  <!--<ion-segment [(ngModel)]="func" style="padding-top: 1px;background: #fff">
    <ion-segment-button style="width: 45px !important;height: 45px" active value="recommend" (ionSelect)="selectFunc('RcmdPage')">
      商城
    </ion-segment-button>
    <ion-segment-button style="width: 45px !important;height: 45px" value="nailShop" (ionSelect)="selectFunc('NailShopPage')">
      美店
    </ion-segment-button>
    <ion-segment-button style="width: 45px !important;height: 45px" value="train" (ionSelect)="selectFunc('TrainPage')">
      培训
    </ion-segment-button>
  </ion-segment>-->
  <!--<div class="bats">
    <div class="bat1"><button active value="recommend" (ionSelect)="selectFunc('RcmdPage')"><img src="../../assets/img/ios/shangcheng-@2x.png" style="width: 50px;height: 50px;" alt=""></button><br><span>商城</span></div>
    <div class="bat2"><button value="recommend" (ionSelect)="selectFunc('RcmdPage')"><img src="../../assets/img/ios/jiuye@2x.png" style="width: 50px;height: 50px;" alt=""></button><br><span>就业</span></div>
    <div class="bat3"><button value="recommend" (ionSelect)="selectFunc('RcmdPage')"><img src="../../assets/img/ios/peixun@2x.png" style="width: 50px;height: 50px;" alt=""></button><br><span>培训</span></div>
  </div>-->

  <div class="head">
    <div class="cont">
      <span class="text1">美图美款</span>
      <br>
      <!--<div >新增服务</div>-->
      <span class="text2">海量美图美款任你挑选</span>
    </div>
    <div class="cont1">
      <div class="btn active" tappable (click)="recommend(0)" id="rec">
        <a href="javascript:void(0);">
          <span>推荐</span>
        </a>
      </div>
      <div class="btn" tappable (click)="recommend(1)" id="hot">
        <a href="javascript:void(0);">
          <span>热门</span>
        </a>
      </div>
      <div class="btn" tappable (click)="recommend(2)" id="news">
        <a href="javascript:void(0);">
          <span>最新</span>
        </a>
      </div>
      <div class="btn ml " id="all" style="margin-left:7%;margin-right:2%;">
        <a href="javascript:void(0);" (click)="openMenu()">
          <span>查看全部</span>
        </a>
        <img src="assets/img/ios/shaixuan@2x.png" alt="">
      </div>
    </div>
  </div>

 








  <ion-slides pager=true autoplay="3000" loop=true zoom style="width:100%;height: 120px;" *ngIf="adList.length > 1">
    <ion-slide *ngFor="let adItem of adList" tappable (click)="bannerClick(adItem.ad_link)">
      <img [src]="picUrl + adItem.ad_img_path" style="display:block;width:100%" />

      <!--<img [defaultImage]="defaultImage" [lazyLoad]="adItem.ad_pic"  [offset]="offset" style="width:100%;height:110px" > -->
    </ion-slide>
  </ion-slides>
  <!--<ion-grid>
    <ion-row>
      <ion-col width-25 *ngFor="let item of styleList, let i = index" style="height: 50px;" id="item-list" #itemList>
        <button class="btn_cls" outline #cateItem ion-button value="{{item.id}}" (click)="styleItemClick(cateItem,$event,item,i)">{{item.type_name}}</button>
      </ion-col>
    </ion-row>
  </ion-grid>-->



  <!-- <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingText="刷新中..." refreshingText="正在刷新...">
    </ion-refresher-content>
  </ion-refresher> -->
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingText="刷新中..." refreshingText="正在刷新..."></ion-refresher-content>
  </ion-refresher>

  <ul class="list1" style="display:flex;flex-wrap: wrap;">
    <li *ngFor="let item of styleMore, let i = index">
      <div id="reconmend_list" style="border-radius: 5px;">
        <div class="proimg" (tap)="showGoodsDetail($event,i)">
          <!-- <ul style="display: flex;flex-wrap: wrap;list-style:none;padding:0;justify-content: center;margin: 0px;background-color: #f0f2f5;">
    <li style="width:49%;" *ngFor="let item of styleMore, let i = index" (tap)="showGoodsDetail($event,i)">
      <ion-card id="reconmend_list" style="border-radius: 5px;">
        <div class="proimg"> -->
          <img [defaultImage]="defaultImage" [lazyLoad]="picture + item.nail_middle_url" [scrollObservable]="rcmdContainer.ionScroll"
            style="width: 100%;height: 100%;" />
        </div>
        <div class="text">
          <div class="text1">
            <div class="text1-1" (tap)="gotoNailer(item)">
              <span class="imgs">
                <!-- <img src="http://{{item.artist_avator}}" alt=""> -->
                <img src="{{picture}}{{item.artist_avator}}" alt="">
              </span>
              <span class="name">{{item.artist_nickname}}</span>
            </div>
            <div class="text1-2">
              <span icon-right class="ml1" (click)="obout(item.nail_id,i)">
                <img src="assets/img/ios/zan-gray@2x.png" alt="" *ngIf="item.is_zank==0">
              </span>
              <span icon-right class="ml1" (click)="obout(item.nail_id,i)">
                <img src="assets/img/ios/zan-red@2x.png" alt="" *ngIf="item.is_zank==1">
              </span>
              <div class='ml2' text-center *ngIf='item.hasdianzang == 1'>
                <span *ngIf="item.is_zank==1">+1</span>
                <span *ngIf="item.is_zank==0">-1</span>
              </div>
            </div>
            <!-- <span class="imgs">
              <img src="http://{{item.artist_avator}}" alt="">
            </span>
            <span class="name" style="margin-left: 5px;font-size: 14px;color: rgb(102, 102, 102);">{{item.artist_nickname}}</span>
            <span icon-right class="ml1" (click)="obout(item.nail_id,i)">
              <img src="../../assets/img/ios/zan-gray@2x.png" alt="" *ngIf="item.is_zank==0">
            </span>
            <span icon-right class="ml1" (click)="obout(item.nail_id,i)">
                <img src="../../assets/img/ios/zan-red@2x.png" alt="" *ngIf="item.is_zank==1">
            </span> -->
          </div>
          <div class="text2">
            <span>合作店铺</span>
            <div class="cooperate">
              <img *ngFor="let imgs of item.buy_shops, let i = index" src="{{picture}}{{imgs.shop_logo}}" alt="">
            </div>
            <ion-icon name="more"></ion-icon>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <!--<ul *ngIf="ids==1" style="display: flex;flex-wrap: wrap;list-style:none;padding: 0px;margin: 0px;background-color: #f0f2f5;">
    <li style="width: 50%;" *ngFor="let item of styleMore, let i = index" (click)="showGoodsDetail()">
      <ion-card id="reconmend_list" style="border-radius: 5px;">
        <img [defaultImage]="defaultImage" [lazyLoad]="'http://' + item.nail_middle_url" [scrollObservable]="rcmdContainer.ionScroll"
        />
        <div class="text">
          <div class="text1">
            <span> <ion-icon name="information-circle"></ion-icon></span><span style="margin-left: 5px;font-size: 18px;color: rgb(102, 102, 102);">小喵喵美甲师22</span>
            <span icon-right class="ml1" (click)="obout(true,i)">
              <img src="../../assets/img/ios/zan-gray@2x.png" alt="" *ngIf="oboaut==false?true:false">
              </span>
            <span icon-right class="ml1" (click)="obout(false,i)">
                <img src="../../assets/img/ios/zan-red@2x.png" alt="" *ngIf="oboaut == true?true:false">
                </span>
          </div>
          <div class="text2">
            <span>合作店铺</span>
            <ion-icon name="navigate"></ion-icon>
            <ion-icon name="navigate"></ion-icon>
            <ion-icon name="navigate"></ion-icon>
            <ion-icon name="more"></ion-icon>
          </div>
        </div>
      </ion-card>
    </li>
  </ul>-->
  <!--<ul *ngIf="ids==2" style="display: flex;flex-wrap: wrap;list-style:none;padding: 0px;margin: 0px;background-color: #f0f2f5;">
    <li style="width: 50%;" *ngFor="let item of styleMore, let i = index" (click)="showGoodsDetail()">
      <ion-card id="reconmend_list" style="border-radius: 5px;">
        <img [defaultImage]="defaultImage" [lazyLoad]="'http://' + item.nail_middle_url" [scrollObservable]="rcmdContainer.ionScroll"
        />
        <div class="text">
          <div class="text1">
            <span> <ion-icon name="information-circle"></ion-icon></span><span style="margin-left: 5px;font-size: 18px;color: rgb(102, 102, 102);">小喵喵美甲师33</span>
            <span icon-right class="ml1" (click)="obout(true,i)">
              <img src="../../assets/img/ios/zan-gray@2x.png" alt="" *ngIf="oboaut==false?true:false">
              </span>
            <span icon-right class="ml1" (click)="obout(false,i)">
                <img src="../../assets/img/ios/zan-red@2x.png" alt="" *ngIf="oboaut == true?true:false">
                </span>

          </div>
          <div class="text2">
            <span>合作店铺</span>
            <ion-icon name="navigate"></ion-icon>
            <ion-icon name="navigate"></ion-icon>
            <ion-icon name="navigate"></ion-icon>
            <ion-icon name="more"></ion-icon>
          </div>
        </div>
      </ion-card>
    </li>
  </ul>-->
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)"  threshold="100px">
    <ion-infinite-scroll-content  loadingSpinner="bubbles" loadingText="加载中..."></ion-infinite-scroll-content>
  </ion-infinite-scroll>
  <a href="javascript:scroll(0,0)" hidefocus="true" title="回到顶部" id="scrollTop" tappable (click)="scrollToTop()" style="display: none;"></a>

  <!-- <ion-fab right class="back" (click)="toTop()" *ngIf="top">
            <ion-icon name="md-arrow-up"></ion-icon>
      </ion-fab> -->
</ion-content>